<template>
    <admin-container :title="title" :loading="loading">
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="120px"
            @submit.prevent.native="onSubmit">

            <el-form-item label="分类" prop="cate_id">
                <el-select v-model="form.cate_id" style="width: 100%">
                    <el-option v-for="item in cates"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title"/>
            </el-form-item>

            <el-form-item label="副标题" prop="subtitle">
                <el-input v-model="form.subtitle"/>
            </el-form-item>

            <el-form-item label="内容" prop="content">
                <k-markdown v-model="form.content"/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" native-type="submit" :loading="subing">
                    保存
                </el-button>
            </el-form-item>
        </el-form>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AdminContainer from '@/components/admin-container.vue';
import KMarkdown from '@/components/markdown/index.vue';
import KTip from '@/components/tip/index.vue';
import { getArticle, getArticleCates, postArticle } from '../service';
import { ArticleCategoryModel } from '@/views/article/model';
@Component({
    components: { KTip, KMarkdown, AdminContainer }
})
export default class Page extends Vue {
    form: any = {};
    rules: any = {
        cate_id: [
            { required: true, message: '请选择分类' }
        ],
        title: [
            { required: true, message: '标题不可为空' },
        ],
        subtitle: [
            { required: true, message: '副标题不可为空' },
        ],
        content: [
            { required: true, message: '内容不可为空' }
        ]
    };
    subing: boolean = false;
    cates: ArticleCategoryModel[] = [];
    loading: boolean = true;

    get id(): number {
        return Number(this.$route.query.id ?? 0);
    }

    get title(): string {
        return this.id ? '编辑文章' : '发布文章';
    }

    mounted() {
        this.loading = true;
        Promise.all([
            this.getCate(),
            this.getRead(),
        ]).finally(() => {
            this.loading = false;
        })
    }

    /**
     * 获取分类
     */
    async getCate() {
        this.cates = await getArticleCates();
    }

    /**
     * 获取详情
     */
    getRead() {
        if (!this.id) {
            return;
        }
        return getArticle(this.id)
            .then(result => {
                this.form = result.data;
            })
    }

    async onSubmit() {
        await this.$validator('form');
        this.subing = true;
        postArticle(!!this.id, this.form)
            .finally(() => {
                this.subing = false;
            })
            .then(result => {
                this.form = { ...result.data };
                console.log('form', this.form)
                this.$message.success('保存成功');
                if (!this.id) {
                    this.$router.replace({
                        params: { id: result.data.id }
                    });
                }
            })
    }
}
</script>
